<template>
	<view class="content">
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex == index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view
					v-if="tabIndex==tabCurrentIndex"
					class="list-scroll-content" 
					scroll-y
					:refresher-triggered="!isLoad&&type=='refresh'"
					:refresher-enabled="true"
					@refresherrefresh="loadData('refresh')"
					@scrolltolower="loadData"
				>
					<!-- 空白页 -->
					<empty v-if="isLoad === true && orderList.length === 0"
					:tips="hasLogin?'您还没有相关订单':'您还未登录,去登录吧'">
						<view v-if="!hasLogin" class="btn-link" @click="toLogin">去登录</view>
					</empty>
					<!-- 订单列表 -->
					<view 
						v-for="(item,pindex) in orderList" :key="pindex"
						class="order-list"
					>
						<order-card :item="item" @onConfim="loadData('refresh')">
							<template slot="pay">
								<text class="btn-cancel" @click="showPayPop(item)">去付款</text>
							</template>
							<template slot="quxiao">
								<text class="btn-cancel" @click="showcancelOrder(item,1)">取消订单</text>
							</template>
							<template slot="xieshang">
								<text class="btn-cancel" @click="showcancelOrder(item,2)">协商完成</text>
							</template>
						</order-card>
					</view>
					<uni-load-more v-if="!(params.page==1&&loadingType=='nomore')" :status="loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!--删除取消订单-弹窗-->
		<uni-pop type="confirm"
			v-model="popData.isShow"
			:title="popData.title"
			@onConfirm="onConfirm"
		/>
		<pay-pop ref="payPicker" :order-id="orderId" :margin="margin" @onConfirm="loadData('tabChange')" />
		<cancel-order ref="cancelOrder" :order-id="cancelOrderId" :type="cancelType" @onConfirm="loadData('tabChange')" />
	</view>
</template> 

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import orderCard from '@/components/card/order-card.vue'
	import payPop from "@/components/pay-pop.vue"
	import CancelOrder from '@/components/cancel-order.vue';
	import { mapState } from 'vuex'; 
	export default {
		components: {
			uniLoadMore,
			orderCard,
			payPop, // 支付弹窗
			CancelOrder // 支付弹窗
		},
		data() {
			return {
				type:'',
				reFresh:'', // 详情返回本页页面刷新
				popData:{}, // 弹窗信息
				tabCurrentIndex: 0,
				params:{
					page: 1,
					pageSize: 10,
					statusList: ''
				},
				isLoad: false, // 是否加载完毕
				loadingType: 'more', //加载更多状态
				orderList: [], 
				navList: [
					{
						state: 1,
						text: '待接单'
					},
					{
						state: '3,4,5,6,7,8,12',
						text: '待服务'
					},
					{
						state: '9,10,11',
						text: '服务中'
					},
					{
						state: 15,
						text: '已完成'
					},
					{
						state: 0,
						text: '全部'
					}
				],
				orderId:'', // 支付orderId
				cancelOrderId:'',//取消orderId
				cancelType:1,//1 取消订单 2 协商完成 改成水电1 电器2
				margin: false, // 支付类型 是否是保证金
				loginUrl: '/pages/public/login' // 登录地址
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow(){
			let val = getApp().globalData.orderStatus||0//赋值取得参数
			let orderRefresh = getApp().globalData.orderRefresh//赋值取得参数
			if(orderRefresh===true&&this.tabCurrentIndex==val){
				this.loadData('tabChange')
			} else {
				this.tabCurrentIndex = val
			}
			getApp().globalData.orderRefresh = false
		},
		onLoad(){
			this.tabCurrentIndex = 0
			// this.loadData('tabChange')
		},
		onHide(){
			// getApp().globalData.orderStatus = ''
		},
		methods: {
			toLogin(){
				uni.navigateTo({ url:this.loginUrl })
			},
			// 支付
			showPayPop(item) {
				this.orderId = item.orderId
				this.margin = item.status==13
				this.$refs.payPicker.showPicker();
			},
			showcancelOrder(item,type) {
				this.cancelOrderId = item.orderId
				this.cancelType = type
				this.$refs.cancelOrder.showPicker();
			},
			//获取订单列表
			loadData(type){
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex||0;
				let navItem = this.navList[index];
				this.params.statusList = navItem.state || ''
				if(type=="tabChange"||type=="refresh") {
					this.isLoad = false // 是否加载完毕
					this.orderList = []
					this.loadingType = 'more' //加载更多状态
					this.params.page = 1
				}
				if(this.loadingType === 'loading'||this.loadingType==='nomore'){
					//防止重复加载
					return;
				}
				this.type = type
				this.loadingType = 'loading';
				let params = { ...this.params }
				if(!params.statusList){
					delete params.statusList
				}
				this.$apis.getApi('/order/orderList',params).then(({ code,result }) => {
					if(result) {
						//添加不同状态下订单的表现形式
						this.orderList = result
						//isLoad新字段用于表示数据加载完毕，如果为空可以显示空白页
						this.isLoad = true
						//判断是否还有数据， 有改为 more， 没有改为noMore 
						this.loadingType = 'nomore'
						if(this.loadingType=='more'){
							this.params.page++
						}
					} else {
						this.loadingType = 'nomore'
						this.isLoad = true
					}
				})
			}, 
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current
				getApp().globalData.orderStatus = this.tabCurrentIndex
				this.loadData('tabChange')
			},
			//顶部tab点击
			tabClick(index){
				if(index === this.tabCurrentIndex) return
				this.tabCurrentIndex = index
			},
			onConfirm(){
				if(this.popData.type == 'cancel') {
					this.$apis.cancerOrder(this.popData.orderId).then(({code}) => {
						if(code == 200){
							this.$api.msg('取消成功')
							this.popData.isShow=false
							this.loadData('tabChange')
						}
					})
				} else {
					this.$apis.deleteOverdueOrder(this.popData.orderId).then(({code}) => {
						if(code == 200){
							this.$api.msg('删除成功')
							this.popData.isShow=false
							this.loadData('tabChange')
						}
					})
				}
			},
			//删除订单/取消订单
			openConfirm(type,orderId){
				this.popData = {
					isShow: true,
					title:`亲，您确定要${type=='cancel'?'取消':'删除'}订单吗？`,
					orderId:orderId,
					type: type
				}
			},
			// 去支付
			toPay(item) {
				uni.redirectTo({
					url: `/pages/money/pay?data=${JSON.stringify(item)}&orderId=${item.orderId}`
				})
			},
			// 查看物流
			toExpressage(newOrderItemId) {
				uni.navigateTo({
					url: `/userPages/expressage?orderId=${newOrderItemId}`
				})
			},
			// 去订单详情
			toOrderDetail(item) {
				uni.navigateTo({
					url: `/pages/order/orderDetail?orderId=${item.orderId}`
				})
			},
			//订单状态文字和颜色
			orderStateExp(state){
				let stateTip = '',
					stateTipColor = '#D22E1B';
				switch(+state) {
					case 1:
						stateTip = '待支付'; break;
					case 2:
						stateTip = '买家已付款'; break;
					case 3:
						stateTip = '交易关闭'; 
						stateTipColor = '#999999';
						break;
					default:
						stateTip = '交易成功';
						break
					//更多自定义
				}
				return {stateTip, stateTipColor};
			},
			copyBtn(copyContent) {
				uni.setClipboardData({
					data: String(copyContent),
					success: () => {
						this.$api.msg('订单号已复制')
					},
					fail:(err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scope="scoped">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 22upx;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		justify-content: space-between;
		.nav-item{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			font-size: 16px;
			color: #666666;
			position: relative;
			width: 90upx;
			white-space: nowrap;
			&.current{
				color: #4083F0;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 48upx;
					height: 0;
					border-bottom: 6upx solid #4083F0;
				}
			}
		}
	}

.order-list{
	margin: 20upx $page-row-spacing 0;
}
	
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}
	
	.uni-load-more__img>view {
		position: absolute
	}
	
	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}
	
	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}
	
	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}
	
	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}
	
	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}
	
	.load2 {
		transform: rotate(30deg)
	}
	
	.load3 {
		transform: rotate(60deg)
	}
	
	.load1 view:nth-child(1) {
		animation-delay: 0s
	}
	
	.load2 view:nth-child(1) {
		animation-delay: .13s
	}
	
	.load3 view:nth-child(1) {
		animation-delay: .26s
	}
	
	.load1 view:nth-child(2) {
		animation-delay: .39s
	}
	
	.load2 view:nth-child(2) {
		animation-delay: .52s
	}
	
	.load3 view:nth-child(2) {
		animation-delay: .65s
	}
	
	.load1 view:nth-child(3) {
		animation-delay: .78s
	}
	
	.load2 view:nth-child(3) {
		animation-delay: .91s
	}
	
	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}
	
	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}
	
	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}
	
	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}
	
	@-webkit-keyframes load {
		0% {
			opacity: 1
		}
	
		100% {
			opacity: .2
		}
	}
</style>
